<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <meta charset="UTF-8">
    <style>
        body{
            background-color: #cde0e5;
            /*text-align:center;*/
        }
        #addquestionnaire_box{
            /*text-align:center;*/
            margin: 0 auto;
            width : 75%;
            background-color: white;
            opacity: 0.8;
            border-radius:10px;
            box-shadow: 5px 5px 5px 5px #969899;
        }
        /*h3{*/
        /*    margin-left: 30%;*/
        /*}*/

    </style>
    <title>后台管理</title>
</head>
<body>
<div class="container-fluid">
    <th:block th:if="(${username} eq 'root') or (${username} eq 'viewer') " >
        <nav class="navbar navbar-default navbar-inverse navbar-fixed-top"
             role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" >LOGO</a>
                </div>
                <ul class="nav navbar-nav">
                    <li><a target="_blank" href="../../admin"
                           th:target="_self">
                        返回主页面</a></li>
                </ul>
                <th:block th:if="${username} == 'viewer'">
                    <ul class="nav navbar-nav">
                        <li><a target="_blank" href="./change" th:target="_self">
                            更改</a></li>
                    </ul>
                </th:block>
                <th:block th:if="${username} == 'root'">
                    <ul class="nav navbar-nav">
                        <li><a target="_blank" href="./view" th:target="_self">
                            预览</a></li>
                    </ul>
                </th:block>


            </div>
        </nav>
    </th:block>

    <div class="row">
        <div class="col" style="height:100px;"></div>
        <div class="col">
            <div id="addquestionnaire_box">

                <div style="height:1px;"></div>
                <h1 class="text-center" th:text="${questionnaire_name}"></h1>
                <div style="height:60px;"></div>

                <form id="questions_form" class="form-horizontal" th:action="@{/questionnaire/update}" method="post">


                    <input th:type="text" th:name="type" th:value="(${type})" style="visibility:hidden">
                    <input th:type="text" th:name="id" th:value="(${questionnaire_id})" style="visibility:hidden">

                    <div th:id="question_ + (${questions.getQId()}) + _box" class="form-group" th:each="questions,index:${allquestions}">




                        <div class="form-group">
                            <!--                            <input name=“booktypeno1” type="text" value="value" readonly="readonly">-->

                            <div class="col-sm-2"></div>
                            <div th:with="qid=${questions.getQId()}">
                                <!--                                <th:block th:if="(${index.count}) == 1" > <h5>hello</h5></th:block>-->
                                <th:block th:if = "(${username}) == 'root'" >
                                    <div class="col-sm-8">
                                        <h3>
                                            <input th:name="question_ + (${qid})" th:type="text" th:id="question_ + (${questions.getQId()})" th:value="(${index.count}) + '. ' +(${questions.getQDescribe()})">
                                        </h3>
                                    </div>
                                </th:block>
                                <th:block th:unless = "(${username}) == 'root'" >
                                    <div class="col-sm-8">
                                        <h3  th:id="question_ + (${questions.getQId()})" th:text="(${index.count}) + '. ' +(${questions.getQDescribe()})"></h3>
                                    </div>
                                </th:block>


                                <!--/*@thymesVar id="option" type="com.run.pojo.QuestionOption"*/-->
                                <!--/*@thymesVar id="options" type="java.util.HashMap"*/-->


                                <!--                                单选题的容器-->


                                <th:block th:if="${questions.getQuestionType()} == 'radio' " th:each="option:${options.get(qid)}" >
                                    <div th:id="question_ + (${qid})" class="form-group">

                                        <div class="row" style="padding-bottom:15px;">
                                            <div class="col-sm-3" ></div>
                                            <div class="radio col-sm-8">
                                                <!--/*@thymesVar id="option" type="com.run.pojo.QuestionOption"*/-->
                                                <th:block th:if = "(${username}) == 'root'" >
                                                    <div class="row col-sm-8">
                                                        <input th:name="option_ + (${option.getOpId()})" type="text" class="form-control" th:id="question_ + (${qid}) + _answer_input_ + (${option.getOpId()})" th:value="(${option.getOpDescribe()})" >

                                                    </div>
                                                </th:block>

                                                <th:block th:unless = "(${username}) == 'root'" >
                                                    <input type="radio" th:name="(${qid})"   th:id="question_ + (${qid}) + _answer_radio_ + (${option.getOpId()})" th:value="(${option.getOpId()})">

                                                </th:block>
                                                <label th:for="question_ + (${qid}) + _answer_radio_ + (${option.getOpId()})">
                                                    <th:block th:unless="(${username}) == 'root'" >
                                                        <h4 th:name="(${option.getOpId()})" type="text"
                                                             class="form-control" th:id="question_ + (${qid}) + _answer_input_ + (${option.getOpId()})" th:text="(${option.getOpDescribe()})" > </h4>

                                                    </th:block>
                                                </label>
                                                <th:block th:if = "(${username}) == 'viewer'  or (${username}) == 'root'" >
                                                    <div th:text="(${option.getSelectedNum()}) + 人选择此项"></div>
                                                </th:block>
                                                <!--                                                </div>-->

                                            </div>
                                            <!--                                                &lt;!&ndash;/*@thymesVar id="option" type="com.run.pojo.QuestionOption"*/&ndash;&gt;-->
                                            <!--                                                <label th:for="question_ + (${qid}) + _answer_radio_ + (${option.getOpId()})" >-->
                                            <!--&lt;!&ndash;                                                    <input type="text" class="form-control" th:id="question_ + (${qid}) + _answer_input_ + (${option.getOpId()})" disabled th:value="(${option.getOpDescribe()})" >&ndash;&gt;-->
                                            <!--                                                    <h4 type="text" class="form-control" th:id="question_ + (${qid}) + _answer_input_ + (${option.getOpId()})" th:text="(${option.getOpDescribe()})" > </h4>-->
                                            <!--                                                </label>-->
                                            <!--                                            </div>-->
                                        </div>
                                    </div>
                                </th:block>


                                <th:block th:if="${questions.getQuestionType()} == 'checkbox' " th:each="option:${options.get(qid)}" >
                                    <div th:id="question_ + (${qid})" class="form-group">
                                        <div class="row" style="padding-bottom:15px;">
                                            <!--                                            <div class="col-sm-3"></div>-->

                                            <div class="col-sm-3" ></div>

                                            <div class="checkbox col-sm-8">


                                                <!--/*@thymesVar id="option" type="com.run.pojo.QuestionOption"*/-->
                                                <th:block th:unless = "(${username}) == 'root'" >
                                                    <input type="checkbox"
                                                           th:name="(${qid})"
                                                           th:id="question_ + (${qid}) + _answer_radio_ + (${option.getOpId()}) " th:value="(${option.getOpId()})">
                                                </th:block>

                                                <label th:for="question_ + (${qid}) + _answer_radio_ + (${option.getOpId()})"  >
                                                    <th:block th:if = "(${username}) == 'root'" >
                                                        <input th:name="option_ + (${option.getOpId()})" type="text" class="form-control" th:id="question_ + (${qid}) + _answer_input_ + (${option.getOpId()})" th:value="(${option.getOpDescribe()})" > </input>
                                                    </th:block>
                                                    <th:block th:unless="(${username}) == 'root'" >
                                                        <h4
                                                                th:name="(${option.getOpId()})" type="text" class="form-control" th:id="question_ + (${qid}) + _answer_input_ + (${option.getOpId()})"
                                                                th:text="(${option.getOpDescribe()})" > </h4>
                                                    </th:block>

                                                </label>
                                                <th:block th:if = "(${username}) == 'viewer' or (${username}) == 'root'" >
                                                    <div float="right" th:text="(${option.getSelectedNum()}) + 人选择此项"></div>
                                                </th:block>
                                            </div>


                                            <!--                                                &lt;!&ndash;/*@thymesVar id="option" type="com.run.pojo.QuestionOption"*/&ndash;&gt;-->
                                            <!--&lt;!&ndash;                                                <input type="text" class="form-control" th:id="question_ + (${qid}) + _answer_input_ + (${option.getOpId()})" disabled th:value="(${option.getOpDescribe()})" >&ndash;&gt;-->
                                            <!--                                                <label th:for="question_ + (${qid}) + _answer_radio_ + (${option.getOpId()})" >-->
                                            <!--                                                    &lt;!&ndash;                                                    <input type="text" class="form-control" th:id="question_ + (${qid}) + _answer_input_ + (${option.getOpId()})" disabled th:value="(${option.getOpDescribe()})" >&ndash;&gt;-->
                                            <!--                                                    <input type="text" class
                                                                            <div id="question_1_checkbox" class="form-group">

                                                                            </div>
                                            ="form-control" th:id="question_ + (${qid}) + _answer_input_ + (${option.getOpId()})" th:value="(${option.getOpDescribe()})" > </input>-->
                                            <!--                                                </label>-->
                                            <!--                                            </div>-->
                                        </div>

                                    </div>

                                </th:block>

                                <th:block
                                        th:if="${questions.getQuestionType()} == 'subjective'" >
                                    <div id="question_1_inputbox" class="form-group">
                                        <div class="col-sm-3" ></div>
                                        <div class="col-sm-8" >
                                            <textarea th:name="text_+(${qid})"
                                                      rows="10" cols="80">

                                            </textarea>
                                        </div>
                                    </div>
                                </th:block>

                            </div>

                        </div>
                    </div>
                    <!--                    button-->
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="col-sm-5" ></div>
                            <button type="submit"
                                    class="btn btn-default btn-lg" >提交</button>
                        </div>
                    </div>
                    <div style="height:20px;"></div>

                </form>



                <!--&lt;!&ndash;                为表单添加问题&ndash;&gt;-->
                <!--                                <form id="questions_form" class="form-horizontal">-->
                <!--                &lt;!&ndash;                    问题1&ndash;&gt;-->
                <!--                                    <div id="question_1" class="form-group">-->
                <!--                &lt;!&ndash;                        问题描述&ndash;&gt;-->
                <!--                                        <div class="form-group">-->
                <!--                                            <label for="question_1_describe" class="col-sm-3 control-label">1</label>-->
                <!--                                            <div class="col-sm-7">-->
                <!--                                                <input type="text" class="form-control" id="question_1_describe" placeholder="请输入问题描述">-->
                <!--                                            </div>-->
                <!--                                        </div>-->
                <!--                &lt;!&ndash;                        问题类型&ndash;&gt;-->
                <!--                                        <div class="form-group">-->
                <!--                                            <label class="radio-inline">-->
                <!--                                                <input type="radio" name="question_type" id="question_1_type_radio1" value="option1" checked> 单选-->
                <!--                                            </label>-->
                <!--                                            <label class="radio-inline">-->
                <!--                                                <input type="radio" name="question_type" id="question_1_type_radio2" value="option2"> 多选-->
                <!--                                            </label>-->
                <!--                                            <label class="radio-inline">-->
                <!--                                                <input type="radio" name="question_type" id="question_1_type_radio3" value="option3"> 填空-->
                <!--                                            </label>-->
                <!--                                        </div>-->


                <!--                &lt;!&ndash;                        单选类型问题的容器&ndash;&gt;-->
                <!--                                        <div id="question_1_radiobox" class="form-group">-->
                <!--                                            <div class="row" style="padding-bottom:15px;">-->
                <!--                                                <div class="col-sm-3"></div>-->
                <!--                                                <div class="checkbox col-sm-1">-->
                <!--                                                    <input type="radio" name="question_1_answer_radio" id="question_1_answer_radio1" value="option1">-->
                <!--                                                </div>-->
                <!--                                                <div class="col-sm-5">-->
                <!--                                                    <input type="text" class="form-control" id="question_1_answer_input1">-->
                <!--                                                </div>-->
                <!--                                            </div>-->
                <!--                                            <div class="row" style="padding-bottom:15px;">-->
                <!--                                                <div class="col-sm-3"></div>-->
                <!--                                                <div class="checkbox col-sm-1">-->
                <!--                                                    <input type="radio" name="question_1_answer_radio" id="question_1_answer_radio2" value="option1">-->
                <!--                                                </div>-->
                <!--                                                <div class="col-sm-5">-->
                <!--                                                    <input type="text" class="form-control" id="question_1_answer_input2">-->
                <!--                                                </div>-->
                <!--                                            </div>-->
                <!--                                        </div>-->
                <!--                &lt;!&ndash;                        多选类型问题的容器&ndash;&gt;-->
                <!--                                        <div id="question_1_checkbox" class="form-group">-->

                <!--                                        </div>-->
                <!--                &lt;!&ndash;                        填空类型问题的容器&ndash;&gt;-->
                <!--                                        <div id="question_1_inputbox" class="form-group">-->

                <!--                                        </div>-->
                <!--                                    </div>-->
                <!--                                </form>-->
            </div>
            <div style="height:60px;"></div>

        </div>
        <!--        </div>-->
    </div>
</div>
</body>
</html>